8e:I[903690,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0-pi40mz7bqkr.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3-9mxbrrpiri8.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1w6lzrmet9bug.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/22_9cmbp37bso.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0-pi40mz7bqkr.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3-9mxbrrpiri8.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1w6lzrmet9bug.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/22_9cmbp37bso.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK"],"SWRDataProvider"] 90:T3628,[V0_FILE]plaintext:file="public/videos/experiences.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Gen-4%20The%20character%20winks%20with%20each%20eye%2C%20one%20eye%20at%20a%20time%2C%20charming%20The%20scene%20ends%20with%20the%20character%20smiling%20more%203417779970-EDUSymg0z2Py4KIXgk7OR3Rg9dKnDG.mp4" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import MobileNav from "@/components/mobile-nav" export default function Home() { return (

document.getElementById("search-input")?.focus()} >

) } [V0_FILE]plaintext:file="public/videos/services.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Gen-4%20the%20headlights%20blink%20and%20car%20rotates%20the%20last%20frame%20is%20the%20car%20opening%20a%20door%201800177816-soVTUUbodaPZ2NMGDCMD3RWcbttDEC.mp4" isMerged="true" [V0_FILE]plaintext:file="public/videos/homes.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Gen-4%20the%20front%20door%20opens%20the%20lights%20turn%20on%20inside%20the%20house%20and%20the%20window%20lights%20up%20the%20owl%20flies%20away%20the%20tree%20moves%20with%20the%20wind%201927214844-rHgMrhnsQyb0iNRj6pvdZs6qYs0NHn.mp4" isMerged="true" [V0_FILE]typescriptreact:file="components/mobile-nav.tsx" isEdit="true" "use client" import { useState, useRef, useEffect } from "react" import { cn } from "@/lib/utils" interface NavItem { label: string isNew?: boolean } export default function MobileNav() { const [activeTab, setActiveTab] = useState("Homes") const [isHovering, setIsHovering] = useState(null) const [isInitialLoad, setIsInitialLoad] = useState(true) const [underlineOpacity, setUnderlineOpacity] = useState(0) const [isIOS, setIsIOS] = useState(false) const [hasPlayedOnce, setHasPlayedOnce] = useState>({ Homes: false, Experiences: false, Services: false, }) const [isPermanentlyZoomed, setIsPermanentlyZoomed] = useState>({ Homes: false, Experiences: false, Services: false, }) const videoRefs = useRef>({ Homes: null, Experiences: null, Services: null, }) const [underlineStyle, setUnderlineStyle] = useState({ left: 0, width: 0, }) const navRefs = useRef>({}) const navItems: NavItem[] = [{ label: "Homes" }, { label: "Experiences" }, { label: "Services" }] // Detect iOS useEffect(() => { const userAgent = window.navigator.userAgent.toLowerCase() const isIOSDevice = /iphone|ipad|ipod/.test(userAgent) || (userAgent.includes("mac") && "ontouchend" in document) setIsIOS(isIOSDevice) }, []) // Fix iOS initial frame rendering useEffect(() => { if (isIOS) { // For each video, handle iOS-specific initialization Object.keys(videoRefs.current).forEach((key) => { const video = videoRefs.current[key] if (video) { // Set a very low volume during this process video.volume = 0.01 // Play the video const playPromise = video.play() if (playPromise !== undefined) { playPromise .then(() => { // If this is not the active tab, pause after a short delay if (key !== activeTab) { setTimeout(() => { video.pause() video.currentTime = 0 // Reset volume video.volume = 1 }, 50) } else { // For the active tab, let it play through and mark as played video.volume = 1 setHasPlayedOnce((prev) => ({ ...prev, [key]: true })) setIsPermanentlyZoomed((prev) => ({ ...prev, [key]: true })) } }) .catch((error) => { console.log("Auto-play prevented:", error) }) } } }) } }, [isIOS, activeTab]) // Handle initial load fade-in useEffect(() => { // Set initial position without animation const activeElement = navRefs.current["Homes"] if (activeElement) { const { offsetLeft, offsetWidth } = activeElement setUnderlineStyle({ left: offsetLeft, width: offsetWidth, }) } // Fade in the underline setTimeout(() => { setUnderlineOpacity(1) }, 100) // After initial animation, switch to slide mode setTimeout(() => { setIsInitialLoad(false) }, 500) }, []) useEffect(() => { // Skip position updates during initial load if (isInitialLoad) return // Update the underline position based on the active tab const activeElement = navRefs.current[activeTab] if (activeElement) { const { offsetLeft, offsetWidth } = activeElement setUnderlineStyle({ left: offsetLeft, width: offsetWidth, }) } // Handle videos for tabs with videos ;["Homes", "Experiences", "Services"].forEach((tabName) => { const videoRef = videoRefs.current[tabName] // Skip if we're on iOS and this is the initial load (handled by iOS-specific effect) if (isIOS && isInitialLoad && tabName === activeTab) return // Play video once when switching to tab if (activeTab === tabName && !hasPlayedOnce[tabName] && videoRef) { videoRef.currentTime = 0 videoRef.play() setHasPlayedOnce((prev) => ({ ...prev, [tabName]: true })) setIsPermanentlyZoomed((prev) => ({ ...prev, [tabName]: true })) } // Reset video when switching away from tab if (activeTab !== tabName && videoRef) { setIsPermanentlyZoomed((prev) => ({ ...prev, [tabName]: false })) videoRef.pause() videoRef.currentTime = 0 // Reset to first frame } }) }, [activeTab, hasPlayedOnce, isInitialLoad, isIOS]) const handleTabClick = (label: string) => { setActiveTab(label) if (["Homes", "Experiences", "Services"].includes(label)) { setHasPlayedOnce((prev) => ({ ...prev, [label]: false })) // Reset so it plays again when switching back } } const handleVideoClick = (label: string) => { const videoRef = videoRefs.current[label] if (videoRef) { videoRef.currentTime = 0 videoRef.play() } setIsPermanentlyZoomed((prev) => ({ ...prev, [label]: true })) handleTabClick(label) } return (

{navItems.map((item) => ( ))}

{/* Animated underline */}

) }84:["$","$L8e",null,{"chatId":"JXtCXpM7Ue1","children":["$","$L8f",null,{"data":{"@\"active-block\",\"JXtCXpM7Ue1\",":{"id":"b_i6oDqSoaKOp","messageId":"YudJLWIM3TEnszz2qZ8T5nn5nu1V1xEO","source":"$90","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"mobile-nav","type":"code-project","project":"mobile-nav"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"JXtCXpM7Ue1\",":false,"":null},"children":"$L91"}]}]

About

Tags

Share

About

Tags

Share

More from rauchg

More Templates Like This